<!--
 * @Author: 曹捷
 * @Date: 2020-08-24 17:38:29
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-03-26 15:34:05
 * @Description: fileContent
-->
<template>
  <div class="downExcel">
    <div class="show">
      <i @click="down" class="fa fa-file-excel-o downinfo"></i>
      <a href id="downs"></a>
    </div>
    <table class="downtable" :id="tableId" style="display:none;" v-if="dataList.length>0">
      <thead>
        <tr style="text-align:center;font-weight:600;font-size:16px;">
          <template v-for="(item,index) in columns">
            <td :key="index" style="text-align:center;">{{item.label}}</td>
          </template>
        </tr>
      </thead>
      <tbody>
        <tr :key="cindex" v-for="(item,cindex) in dataList">
          <template v-for="(column,index) in columns">
            <td :key="index" style="text-align:center;">
              <span>{{column.render ? column.render(item[column.prop]) :item[column.prop] |valueType(column.filterType)}}</span>
            </td>
          </template>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script type="text/javascript" language="javascript" >
import XLSX from 'xlsx'
import util from './../../utils/utils.js'
export default {
  props: {
    columns: {
      type: Array,
    },
    dataList: {
      type: Array,
    },
    title: {
      type: String,
      default: 'title',
    },
  },
  data () {
    return {
      collength: '',
      tableId: ''
    }
  },
  methods: {
    down () {
      this.$emit('down', this.downExcl)
    },
    downExcl () {
      // 初始化
      var workbook = XLSX.utils.book_new();
      // 数据
      var ws1 = XLSX.utils.table_to_sheet(document.getElementById(this.tableId));
      // 这是  Sheet
      XLSX.utils.book_append_sheet(workbook, ws1, "Sheet1");
      XLSX.writeFile(workbook, `${this.title}.xlsx`);
    },
  },
  created () {
    this.tableId = util.util.randomString()
    console.log('🚀 ~ file: downExcel.vue ~ line 65 ~ created ~ this.tableId', this.tableId)
  },
  mounted () {
    this.collength = this.columns.length
  },
}
</script>

<style>
.downinfo {
  position: absolute;
  right: 40px;
  top: 0;
  height: 45px;
  line-height: 45px;
  font-size: 18px;
  color: #fff;
}
.downtable td {
  text-align: center;
}
</style> 


